<template>
    <div>
        <el-table :data="rooms2" style="width: 100%">
            <el-table-column prop="id" label="id" width="100"></el-table-column>
            <el-table-column prop="gender" label="性别" width="100"></el-table-column>
            <el-table-column prop="capacity" label="宿舍床位" width="100"></el-table-column>
            <el-table-column prop="dormitoryNumber" label="宿舍号" width="100"></el-table-column>
            <el-table-column>
                <template slot-scope="scope">
                <el-progress :text-inside="true" :stroke-width="26" :percentage="scope.row.occupancy"></el-progress>
            </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="250">
                <template slot-scope="scope">
                    {{ scope.$index }}
                    <el-button @click="lookClick(scope.$index)" type="text" size="small">查看</el-button>
                    <el-button type="text" @click="editClick(scope.$index)" size="small">编辑</el-button>
                    <el-button type="text" @click="delClick(scope.$index)" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-button @click="dialogFormVisibleAdd = true">增加宿舍</el-button>
        <el-button @click="assignRoomDialogVisible = true">分配宿舍</el-button>
        <div>
            <el-dialog title="查看宿舍" :visible.sync="dialogFormVisible">
                <el-form :model="activeRoom" :disabled="true">
                    <el-form-item label="宿舍性别:" label-width="100px">
                        <el-input v-model="activeRoom.gender" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="宿舍床位:" label-width="100px">
                        <el-input v-model="activeRoom.capacity" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="宿舍号" label-width="100px">
                        <el-input v-model="activeRoom.dormitoryNumber" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                </div>
            </el-dialog>
        </div>

        <div>
            <el-dialog title="查看宿舍" :visible.sync="dialogFormVisibleU">
                <el-form :model="eidtingRoom">
                    <el-form-item label="宿舍性别:" label-width="100px">
                        <el-input v-model="eidtingRoom.gender" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="宿舍床位:" label-width="100px">
                        <el-input v-model="eidtingRoom.capacity" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="宿舍号" label-width="100px">
                        <el-input v-model="eidtingRoom.dormitoryNumber" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="updataRoom">保存</el-button>
                    <el-button @click="dialogFormVisibleU = false">取消</el-button>
                </div>
            </el-dialog>
        </div>

        <div>
            <el-dialog title="增加宿舍" :visible.sync="dialogFormVisibleAdd">
                <el-form :model="newRoom">
                    <el-form-item label="宿舍性别:" label-width="100px">
                        <el-input v-model="newRoom.gender" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="宿舍床位:" label-width="100px">
                        <el-input v-model="newRoom.capacity" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="宿舍号" label-width="100px">
                        <el-input v-model="newRoom.dormitoryNumber" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="addClick">保存</el-button>
                    <el-button @click="dialogFormVisibleAdd = false">取消</el-button>
                </div>
            </el-dialog>
        </div>

        <div>
            <el-dialog title="分配宿舍" :visible.sync="assignRoomDialogVisible">
                <el-form :model="roomAssignmentApplication">

                    <el-form-item label="宿舍号:" label-width="100px">
                        <el-select v-model="roomAssignmentApplication.dormitoryNumber" placeholder="请选择宿舍" @change="roomAssignmentApplication.studentId=''">
                            <el-option v-for="(assignableRoom,index) in assignableRooms" :key="index" :label="assignableRoom.dormitoryNumber" :value="assignableRoom.dormitoryNumber" ></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="可分配学生:" label-width="100px">
                    <el-select  v-model="roomAssignmentApplication.studentId" placeholder="请选择学生" >
                            <el-option v-for="(matchedUnassignedStudent,index) in matchedUnassignedStudents"  :ley="index" :label="matchedUnassignedStudent.name" :value="matchedUnassignedStudent.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="assignClick">保存</el-button>
                    <el-button @click="assignRoomDialogVisible = false" >取消</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>


<script>
import { roomsData, studentsData } from "../../../public/schoolData"

export default {
    data() {
        return {
            rooms: roomsData,
            students: studentsData,
            dialogFormVisible: false,
            dialogFormVisibleU: false,
            dialogFormVisibleAdd: false,
            assignRoomDialogVisible: false,
            handleIndex: -1,
            eidtingRoom: {},
            newRoom: {
                id: "",
                dormitoryNumber: '',
                capacity: "",
                gender: '',
            },
            roomAssignmentApplication: {
                studentId:"",
                dormitoryNumber:""
        }
        }
    },
    methods: {

        // 点击查看
        lookClick(index) {
            this.dialogFormVisible = true
            this.handleIndex = index
        },
        // 点击编辑
        editClick(index) {
            this.dialogFormVisibleU = true
            this.handleIndex = index
            this.eidtingRoom = { ...this.activeRoom }
        },
        // 保存编辑内容
        updataRoom() {
            this.rooms = this.rooms.map((room, index) => {
                return this.handleIndex == index ? this.eidtingRoom : room
            })
            this.dialogFormVisibleU = false
        },
        // 点击删除
        delClick() {
            this.rooms.splice(this.handleIndex, 1)
        },
        // 点击保存添加
        addClick() {
            this.dialogFormVisibleAdd = false
            this.rooms.push({ ...this.newRoom, id: Date.now() })
            this.newRoom = {}

        },
        // 保存分配宿舍
        assignClick(){
            let target = this.rooms.find((room)=>{
                return room.dormitoryNumber==this.roomAssignmentApplication.dormitoryNumber
            })
            if(target==undefined){
                this.assignRoomDialogVisible=false
                return
            }
            target.students.push(this.roomAssignmentApplication.studentId)
            this.assignRoomDialogVisible=false
            this.roomAssignmentApplication={} 
        },

    },
    computed: {

        // 当前选中的宿舍
        activeRoom() {
            return this.handleIndex >= 0 ? this.rooms[this.handleIndex] : {}
        },

        // 可以被分配的宿舍(没住满的宿舍)
                assignableRooms(){
                    return this.rooms.filter((room)=>{
                        return room.capacity>room.students.length
                    }).map((room)=>{
                        return { dormitoryNumber: room.dormitoryNumber, gender: room.gender } 
                    })
                },
        // 已经有宿舍的学生
                assignedStudents() {
                    return this.rooms.reduce((_sdudents,room)=>{
                        return _sdudents.concat(room.students)
                    },[])
                },

        // 没有宿舍的学生
        unassignedStudents(){
            return this.students.filter((student)=>{
                return this.assignedStudents.indexOf(student.id) < 0
            })
        },

        // 与宿舍相同性别的学生
        matchedUnassignedStudents(){
            if(this.roomAssignmentApplication.dormitoryNumber==""){return this.unassignedStudents} 
              const target = this.rooms.find((room)=>{
                return room.dormitoryNumber==this.roomAssignmentApplication.dormitoryNumber
            })
            if(target==undefined){return this.unassignedStudents}
            return this.unassignedStudents.filter((student)=>{
                return student.gender== target.gender
            })
        },
        rooms2(){
            return  this.rooms.map((room)=>{
                return {...room,occupancy:room.students.length/room.capacity}
            })
        }




    }

}
</script>
<style>
/* .del
/* .del {
    letter-spacing: 12px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 20px;
    color: #606266;
    font-size: 19px;
    word-break: break-all;
} */
